<template>
  <div class="login">
    <!-- 导航 -->
    <div class="banxin">
      <div class="header">
        <a href="" class="logo">
          <img
            src="../../assets/imgs/login/logo.png"
            alt=""
            style="width: 100%; height: 100%; object-fit: cover"
          />
        </a>
        <div class="nav">
          <a href="/" class="nav-item">首页</a>
          <a href="/" class="nav-item">HR中心</a>
          <a href="/" class="nav-item">简历管理</a>
          <a href="/" class="nav-item">发布职位</a>
          <a href="/" class="nav-item">产品服务</a>
        </div>
        <a href="/" class="stu-login fr">学生入口</a>
      </div>
    </div>
    <!-- 登录界面 -->
    <div class="banner-container">
      <div
        class="section1 banner link"
        style="
          background-image: url('https://sxsimg.xiaoyuanzhao.com/adservice/image/20230630154841nKvcwhvPyofN6FoJEF.png');
        "
      ></div>
      <div class="banxin">
        <div class="login-box">
          <div class="login-type-tab" @click="wechat" v-if="!isWechat">
            <img
              src="../../assets/imgs/login/code.png"
              alt=""
              class="img scan"
            />
            <img class="text" src="../../assets/imgs/login/wechat.png" alt="" />
          </div>
          <div class="login-type-tab" @click="wechat" v-if="isWechat">
            <img
              src="../../assets/imgs/login/phone.png"
              alt=""
              class="img scan"
            />
            <img class="text" src="../../assets/imgs/login/phone2.png" alt="" />
          </div>
          <div class="input-area-nav-wrapper" v-if="!isWechat">
            <span
              class="input-area-nav input-area-nav--active"
              @click="isPassword = false"
            >
              短信登录
            </span>
            <span class="input-area-nav" @click="isPassword = true">
              密码登录
            </span>
            <div
              class="line"
              :style="{ left: isPassword ? '138px' : '25px' }"
            ></div>
          </div>
          <!-- 表单 -->
          <div id="login-with-phone-code">
            <loginForm v-if="!isPassword && !isWechat"></loginForm>
            <loginPWForm v-if="isPassword && !isWechat"></loginPWForm>
            <loginWechat v-if="isWechat" @wechat="wechat"></loginWechat>
          </div>
        </div>
      </div>
    </div>
    <!-- 中间内容一 -->
    <div class="section2 section banxin">
      <div class="title">
        <p class="main-title">实习僧，让年轻人更好就业</p>
        <p class="sub-title">专业校园招聘平台</p>
      </div>
      <div class="sec2-con">
        <div class="sec2-item">
          <div class="sec2-main-title">校园招聘/实习招聘解决方案</div>
          <div class="sec2-sub-title">
            建立端到端系统模型，提供省心高效解决方案
          </div>
          <div class="sec2-img">
            <img src="../../assets/imgs/login/middle01.png" alt="" />
          </div>
        </div>
        <div class="sec2-item">
          <div class="sec2-main-title">雇主品牌打造</div>
          <div class="sec2-sub-title">开启体验式的雇主品牌2.0</div>
          <div class="sec2-img">
            <img src="../../assets/imgs/login/middle02.png" alt="" />
          </div>
        </div>
        <div class="sec2-item">
          <div class="sec2-main-title">实习管家，灵活用工</div>
          <div class="sec2-sub-title">全流程服务，人才库数据化管理</div>
          <div class="sec2-img">
            <img src="../../assets/imgs/login/middle03.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <!-- 中间内容二 -->
    <div class="section3 section">
      <div class="banxin">
        <div class="title">
          <p class="main-title">合作企业</p>
          <p class="sub-title">全球上万家企业共同参与</p>
        </div>
        <div>
          <loginSwiper></loginSwiper>
        </div>
      </div>
    </div>
    <!-- 中间内容三 -->
    <div class="section4 section banxin">
      <div class="title">
        <p class="main-title">候选人筛选、管理更便捷</p>
        <p class="sub-title">引入AI技术，用科技助力招聘</p>
      </div>
      <div class="sec4-con">
        <div class="sec4-item">
          <img src="../../assets/imgs/login/middle06.png" alt="" />
          <span class="main-title">简历标签</span>
          <span class="sub-title">1S识别候选人</span>
        </div>
        <div class="sec4-item">
          <img src="../../assets/imgs/login/middle07.png" alt="" />
          <span class="main-title">高效率简历处理系统</span>
          <span class="sub-title">统一管理招聘流程</span>
        </div>
        <div class="sec4-item">
          <img src="../../assets/imgs/login/middle08.png" alt="" />
          <span class="main-title">招聘特效道具</span>
          <span class="sub-title">增加职位曝光，加速人才匹配</span>
        </div>
      </div>
    </div>
    <!-- 中间内容四 -->
    <div class="section5 section">
      <div class="title">
        <p class="main-title">甄选国内外高校优秀人才</p>
        <p class="sub-title">1500万生源支撑</p>
      </div>
      <div class="sec5-con">
        <img src="../../assets/imgs/login/middle09.png" alt="" />
      </div>
    </div>
    <!-- 脚 -->
    <div class="bottom">
      <div class="footer">
        <div class="footer-top">
          <div class="top-left">
            <div>
              <span class="mr">©2023 实习僧</span>
              <span class="cw">中国专注实习、校招垂直招聘平台</span>
              <a href="#">关于我们</a>
            </div>
            <div>
              <a href="#">蜀ICP备13010980号</a>
              <a href="#">找实习</a>
              <a href="#">找工作</a>
              <a href="#">宣传会</a>
              <a href="#">查网申</a>
            </div>
          </div>
          <div class="top-middle center" ref="outerDom" @click="toTop">
            <div class="backtop bgs"></div>
            <div>回到顶部</div>
          </div>
          <div class="top-right fr">
            <div>
              <span>联系我们</span>
              <span id="copy" class="mlr">sxs@shixiseng.com</span>
              <a class="copy-email copy-btn" href="#">点击复制邮箱</a>
            </div>
            <p style="font-size: 14px; color: #fff">
              服务热线：400-600-8206 服务时间：工作日 9:30-18:00
            </p>
            <div>
              <a href="" class="wb"></a>
              <span
                class="wx"
                @mouseover="isWechat = true"
                @mouseleave="isWechat = false"
              ></span>
              <span
                class="app"
                @mouseover="isHr = true"
                @mouseleave="isHr = false"
                >HR小程序</span
              >
              <transition name="fade">
                <span id="app-img" class="center" v-show="isHr"></span>
              </transition>
              <transition name="fade">
                <span id="wx-img" class="center" v-show="isWechat"></span>
              </transition>
            </div>
          </div>
        </div>
        <div class="footer-bottom">
          <a href="">
            <i></i>
            川公网安备 51019002001179号
          </a>
          <div class="fr">
            <a href="#">实习僧</a>
            <a href="#">校园招</a>
            <a href="#">前辈学院</a>
            <a href="#">空中宣讲</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import loginSwiper from "./loginSwiper.vue";
import loginForm from "./loginForm.vue";
import loginPWForm from "./loginPWForm.vue";
import loginWechat from "./loginWechat.vue";

export default {
  components: { loginSwiper, loginForm, loginPWForm, loginWechat },
  name: "login",
  data() {
    return {
      isPassword: false, //检测点击了短信登录还是密码登录
      isWechat: false, //检测点击了微信登录
      isHr: false, //判断是否移动出去
      isWechat: false,
    };
  },
  methods: {
    wechat() {
      this.isWechat = !this.isWechat;
    },
    toTop() {
      window.scrollTo({
        top: -100,
        behavior: "smooth",
      });
    },
  },
};
</script>

<style scoped>
/* 导航模块 */
.login {
  line-height: 1;
  background-color: #fff;
}

.login .banxin {
  width: 1024px;
  margin: 0 auto;
  position: relative;
  /* background: #81605b; */
}

.logo {
  display: inline-block;
  width: 129px;
  height: 40px;
  overflow: hidden;
  /* background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../../assets/imgs/login/logo.png");
  background-size: 100% 100%; */
}

.header {
  width: 1024px;
  padding-top: 18px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}

.nav {
  display: inline-block;
  vertical-align: top;
  margin-left: 70px;
  height: 35px;
  line-height: 35px;
}

.login .header .nav > a {
  font-size: 16px;
  color: hsla(0, 0%, 100%, 0.8);
  padding: 7px 10px;
  margin-right: 30px;
}

.login .banner-container {
  position: relative;
  min-width: 1024px;
  height: 502px;
}

.login .header .stu-login {
  display: inline-block;
  width: 95px;
  height: 25px;
  color: hsla(0, 0%, 100%, 0.6);
  font-size: 14px;
  border: 1px solid hsla(0, 0%, 100%, 0.6);
  text-align: center;
  line-height: 25px;
  margin-top: 4px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.login .header .stu-login:hover {
  color: hsla(0, 0%, 100%, 1);
  border: 1px solid hsla(0, 0%, 100%, 1);
}

.login .fr {
  float: right;
}

/* 登录模块 */
img {
  border: 0;
}

.login .banxin {
  width: 1024px;
  margin: 0 auto;
  position: relative;
}

.login .section1.link {
  cursor: pointer;
}

.login .section1 {
  height: 502px;
  background: 50% / cover no-repeat;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}

.login .banner-container {
  position: relative;
  min-width: 1024px;
  height: 502px;
}

.login .banner-container .login-box {
  position: absolute;
  width: 228px;
  padding: 65px 36px 10px;
  top: 103px;
  right: 0;
  border-radius: 8px;
  background-color: #fff;
}

.login .banner-container .login-box .login-type-tab {
  position: absolute;
  left: 0;
  top: 0;
  cursor: pointer;
}

.login .banner-container .login-box .login-type-tab .img {
  width: 48px;
  margin-left: 12px;
  margin-top: 12px;
}

.login .banner-container .login-box .login-type-tab .text {
  vertical-align: top;
  width: 112px;
  margin-top: 18px;
  position: relative;
  left: -10px;
}

.login .input-area-nav-wrapper {
  overflow: hidden;
  text-align: center;
  position: relative;
}

.login .input-area-nav:first-child {
  margin-right: 48px;
}

.login .input-area-nav {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC, sans-serif;
  font-weight: 400;
  color: #656667;
  padding-bottom: 9px;
  display: inline-block;
  cursor: pointer;
}

.login .input-area-nav {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC, sans-serif;
  font-weight: 400;
  color: #656667;
  padding-bottom: 9px;
  display: inline-block;
  cursor: pointer;
}

.login .input-area-nav-wrapper .line {
  position: absolute;
  bottom: 0;
  width: 64px;
  height: 3px;
  background: #2684ff;
  border-radius: 2px;
  -webkit-transition: left 0.3s;
  transition: left 0.3s;
}

.login span:first-of-type.input-area-nav--active ~ .line {
  left: 26px;
}

/* 中间内容一 */
.login .section2 {
  padding: 20px 0 66px;
}

.login .banxin {
  width: 1024px;
  margin: 0 auto;
  position: relative;
}

.login .section .title {
  text-align: center;
}

.login .section .title .main-title {
  font-size: 34px;
  font-weight: 500;
  color: #3f424f;
  letter-spacing: 2px;
  margin-bottom: 15px;
}

.login .section .title .sub-title {
  font-size: 20px;
  color: #5f6165;
  letter-spacing: 1px;
}

.login .section2 .sec2-con {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: 40px;
}

.login .section2 .sec2-con .sec2-item {
  width: 328px;
  height: 295px;
  background: #fff;
  box-shadow: 0 12px 30px 0 rgba(79, 86, 105, 0.1);
  border-radius: 12px;
}

.login .section2 .sec2-con .sec2-item .sec2-main-title {
  font-size: 18px;
  font-family: PingFang-SC-Bold, PingFang-SC, sans-serif;
  font-weight: 700;
  color: #3f424f;
  line-height: 25px;
  margin: 26px 0 0 20px;
}

.login .section2 .sec2-con .sec2-item .sec2-sub-title {
  font-size: 14px;
  font-family: PingFang-SC-Medium, PingFang-SC, sans-serif;
  color: #3f424f;
  line-height: 20px;
  margin: 4px 0 0 20px;
}

.login .section2 .sec2-con .sec2-item .sec2-img {
  padding: 20px;
}

.login .section2 .sec2-con .sec2-item .sec2-img img {
  width: 100%;
}

/* 中间内容二 */
.login .section3 {
  padding: 58px 0 40px;
  background-color: #f5f8fc;
}

/* 中间内容三 */
.login .section4 {
  padding-top: 66px;
  padding-bottom: 66px;
}
.login .section4 .sec4-con {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: 20px;
}
.login .section4 .sec4-con .sec4-item {
  width: 280px;
  border-radius: 3px;
  position: relative;
}
.login .section4 .sec4-con .sec4-item img {
  width: 100%;
}
.login .section4 .sec4-con .sec4-item .main-title {
  display: block;
  text-align: center;
  padding: 13px 0 8px;
  font-size: 18px;
  font-family: PingFang-SC-Bold, PingFang-SC, sans-serif;
  font-weight: 450;
  color: #3f424f;
  line-height: 25px;
}
.login .section4 .sec4-con .sec4-item .sub-title {
  display: block;
  text-align: center;
  font-size: 14px;
  font-family: PingFang-SC-Medium, PingFang-SC, sans-serif;
  font-weight: 400;
  color: #3f424f;
  line-height: 20px;
}

/* 中间内容四 */
.login .section5 {
  margin-top: 60px;
  padding: 75px 0 20px;
  background: #f9fbff;
}
.login .section5 .sec5-con {
  width: 1024px;
  height: 157px;
  margin: 37px auto 0;
}
.login .section5 .sec5-con img {
  width: 100%;
}

/* 脚 */
.login .bottom {
  padding-bottom: 15px;
  background-color: #1f1f24;
}

.footer {
  margin: 0 auto;
  padding-top: 64px;
  width: 1024px;
}
.footer .footer-top {
  position: relative;
  height: 160px;
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.3);
  font-size: 14px;
}
.footer .footer-top > div {
  display: inline-block;
  vertical-align: top;
  line-height: 40px;
  height: 40px;
}
.footer .top-left .mr {
  margin-right: 5px;
}
.footer span {
  color: #fff;
}
.footer .top-left > div:first-child .cw {
  margin: 0 8px 0 6px;
}
.footer .cw {
  color: hsla(0, 0%, 80%, 0.5);
}
.footer .top-left > div:last-child > a:first-child {
  padding-left: 0;
}
.footer .top-left a {
  padding: 0 8px;
  position: relative;
}
.footer a {
  color: hsla(0, 0%, 80%, 0.5);
}
a {
  text-decoration: none;
  outline: none;
}
.footer .footer-top > div {
  display: inline-block;
  vertical-align: top;
  line-height: 40px;
  height: 40px;
}
.footer .top-middle {
  position: absolute;
  height: 110px !important;
  cursor: pointer;
  z-index: 1;
  text-align: center;
}
.center {
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}
.footer .top-middle .backtop {
  width: 60px;
  height: 60px;
  opacity: 0.5;
  background-image: url();
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.bgs {
  background-size: cover;
  background-repeat: no-repeat;
}
.footer .top-middle > div:last-child {
  padding-top: 10px;
  text-align: center;
  color: #fff;
  opacity: 0.5;
}
.footer .footer-top > div {
  display: inline-block;
  vertical-align: top;
  line-height: 40px;
  height: 40px;
}
.footer span {
  color: #fff;
}
.footer .top-right .mlr {
  margin: 0 15px 0 10px;
}
.footer .top-right .copy-email {
  font-size: 12px;
  cursor: pointer;
}
.footer a {
  color: hsla(0, 0%, 80%, 0.5);
}
.footer .top-right > div:last-child * {
  vertical-align: top;
  float: right;
}
.footer .top-right .wb {
  width: 35px;
  height: 35px;
  margin-left: 10px;
  background-image: url();
  cursor: pointer;
}
.footer .top-right .wx {
  margin-left: 30px;
  width: 35px;
  height: 35px;
  background-image: url();
  cursor: pointer;
}
.footer .top-right .app {
  width: 140px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  background-color: #0287ee;
  border-radius: 18px;
  -moz-border-radius: 18px;
  -webkit-border-radius: 18px;
  cursor: pointer;
}
.footer .footer-bottom {
  margin-top: 10px;
  line-height: 40px;
  height: 40px;
  font-size: 12px;
}
.footer .footer-bottom > a:first-child > i {
  position: relative;
  display: inline-block;
  top: 3px;
  margin-right: 10px;
  width: 18px;
  height: 20px;
  background-image: url();
}
.footer .footer-bottom > div.fr > a {
  margin-left: 40px;
}
#login-with-phone-code {
  box-sizing: border-box;
}

.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.fr {
  float: right;
}

#app-img {
  position: absolute;
  top: -10px;
  width: 120px;
  height: 120px;
  background-image: url(../../assets/imgs/login/hr.jpg);
  background-size: contain;
}

.login #wx-img {
  position: absolute;
  top: -10px;
  width: 120px;
  height: 120px;
  background-image: url(../../assets/imgs/login/wechat02.png);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
